<template>
  <div class="container">
    <el-card class="center_card">
      <h3 slot="header" style="margin: 0px">我的店铺</h3>
      <el-divider><h4>店铺信息</h4></el-divider>
      <h4 v-if="!hasStore">你还没有店铺：<el-button size="small" @click="tryCreateStore">建立店铺</el-button></h4>
      <template v-if="hasStore">
        <el-card style="margin: auto;width: 100%">
          <div style="display: flex">
            <div style="width: 50%">
              <img src="../../imgs/liuduo.jpg" style="height:200px">
            </div>
            <div style="width: 50%">
              <div style="display: flex; align-items: center;height:45px;justify-content: space-between;">
                <div style="width: 50%">
                  <p>店铺ID:</p>
                </div>
                <div style="width: 50%">
                  <el-input v-if="isModifying" v-model="this.storeInfo.storeId" disabled></el-input><p v-if="!isModifying">{{this.storeInfo.storeId}}</p>
                </div>
              </div>
              <div style="display: flex; align-items: center;height: 45px;justify-content: space-between;">
                <div style="width: 50%">
                  <p>店铺名称:</p>
                </div>
                <div style="width: 50%">
                  <p v-if="!isModifying">{{this.storeInfo.storeName}}</p><el-input v-if="isModifying" v-model="storeInfo.storeName" style="width: 100%"></el-input>
                </div>
              </div>
              <div style="display: flex; align-items: center;height: 45px;justify-content: space-between;">
                <div style="width: 50%">
                  <p>店铺地址:</p>
                </div>
                <div style="width: 50%">
                  <p v-if="!isModifying">{{this.storeInfo.storePosition}}</p><el-input v-if="isModifying" v-model="storeInfo.storePosition" style="width: 100%"></el-input>
                </div>
              </div>
              <div style="display: flex; align-items: center;height: 45px;justify-content: space-between;">
                <div style="width: 50%">
                  <p>店铺电话:</p>
                </div>
                <div style="width: 50%">
                  <p v-if="!isModifying">{{this.storeInfo.storeTelephone}}</p><el-input v-if="isModifying" v-model="storeInfo.storeTelephone" style="width: 100%"></el-input>
                </div>
              </div>
              <div style="height: 40px;align-items: center">
                <el-button size="small" @click="isModifying=true" v-if="!isModifying">修改信息</el-button>
                <el-button size="small" @click="saveInfo" v-if="isModifying">保存信息</el-button>
                <el-button size="small" @click="tryAddBook" >添加书籍</el-button>
              </div>

            </div>
          </div>
        </el-card>
<!--        <el-divider><h4>全部书籍</h4></el-divider>-->
        <el-tabs>
          <el-tab-pane label="上架图书">
          <div style="display: flex;flex-wrap: wrap">
            <div style="width: 50%" v-for="(item,index) in books" :key="index">
              <el-card style="margin: 5px;" body-style="display:flex">
                <div style="width: 30%;cursor: pointer" v-on:click="toDetail(item.bookId)">
                  <img :src="item.imageUrl" class="image">
                </div>
                <div style="width: 70%">
                  <div style="height: 120px">
                    <p style="font-weight: bolder">{{item.name}}</p>
                    <p><span>{{item.author}}</span>/<span>{{item.press}}</span></p>
                  </div>
                    <el-button size="small" plain type="danger" @click="offShelf(item.bookId)">下架图书</el-button>
                </div>
              </el-card>
            </div>
          </div>
        </el-tab-pane>
        </el-tabs>

      </template>
    </el-card>
    <el-dialog
            title="完善图书信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
      <el-form label-position="left" label-width="20%">
        <el-form-item label="标题">
          <el-input style="width: 80%" v-model="addBookInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input style="width: 80%" v-model="addBookInfo.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社">
          <el-input style="width: 80%" v-model="addBookInfo.press"></el-input>
        </el-form-item>
        <el-form-item label="定价">
          <el-input style="width: 80%" v-model="addBookInfo.price"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select style="width: 80%"  v-model="addBookInfo.bookCategoryId">
            <el-option v-for="(item,index) in bookCategories" :value="item.cate_id" :label="item.name" :key="index" >

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片url">
          <el-upload action="" class="upload-demo"
                     style="display: inline-block;margin-left: 2px;"
                     accept=".png,.jpg"
                     multiple :limit="1"
                     :show-file-list="true"
                     :on-exceed="handleExceed"
                     :http-request="httpRequest"
                     :before-remove="remove">
            <el-button size="mini">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="简介">
          <el-input style="width: 80%" type="textarea" v-model="addBookInfo.detail"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBook">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
            title="添加店铺"
            :visible.sync="dialogVisiblesecond"
            width="30%"
            :before-close="handleCloseStore">
      <el-form label-position="left" label-width="20%">
        <!--  "storeManagerId": 0,
  "storeName": "string",
  "storePhoneNum": "string",
  "storePosition": "string",
  "storeTelephone": "string",-->
        <el-form-item label="店铺名称">
          <el-input style="width: 80%" v-model="newStoreInfo.storeName"></el-input>
        </el-form-item>
        <el-form-item label="店铺电话">
          <el-input style="width: 80%" v-model="newStoreInfo.storePhoneNum"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input style="width: 80%" v-model="newStoreInfo.storePosition"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
        <el-input style="width: 80%" v-model="newStoreInfo.storeTelephone"></el-input>
      </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseStore">取 消</el-button>
        <el-button type="primary" @click="createStore">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getCurrentTime } from '../../gettime'
  import { client } from '../../oss.js'
  import axios from 'axios'
export default {
name: "MyStore",
  data(){
  return{
    hasStore:false,
    newStoreInfo:{},
    bookCategories:[
      {
        name:'哲学宗教类',
        cate_id:1
      },
      {
        name:'科学类',
        cate_id:2
      },
      {
        name:'政治法律类',
        cate_id:3
      },
      {
        name:'军事类',
        cate_id:4
      },
      {
        name:'经济类',
        cate_id:5
      },
      {
        name:'文化教育类',
        cate_id:6
      },
      {
        name:'历史类',
        cate_id:7
      },
      {
        name:'医药卫生类',
        cate_id:8
      },
    ],
    dialogVisible:false,
    dialogVisiblesecond:false,
    addBookInfo:{},
    isModifying:false,
    storeInfo:{},
    books:[],
    offshelfbooks:[],
  }
  },
  mounted() {
  this.getInfo()
  },
  methods:{
  tryCreateStore(){
    this.dialogVisiblesecond=true;
    console.log(this.dialogVisiblesecond)
  },
  createStore(){
    let mydata = this.newStoreInfo
    axios.post('/api/store/createStore',mydata).then((res)=>{
      console.log(res)
      if (res.data.code===0||res.data.code===200){
        this.$message.success("创建店铺成功")
      }
      this.getInfo()
    })
  },
    handleCloseStore(){
      this.dialogVisiblesecond=false
    },
    remove(){
      this.addBookInfo.imageUrl='';
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    httpRequest (e) {
      let file = e.file // 文件信息
      if (!file) {
        return false
      } else if (!/\.(png|jpg)$/.test(file.name.toLowerCase())) {
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传png或者jpg格式')
        return false
      }
      let name = 'test/'+getCurrentTime() +'.png';
      client.put(name, file)
      client.list().then(res => {
        console.log(res)
        this.addBookInfo.imageUrl='https://oss-ljc.oss-cn-beijing.aliyuncs.com/'+name;
      })
    },
  handleClose(){
    this.dialogVisible=false
  },
  async addBook(){
    let mydata=this.addBookInfo;
    mydata.isShelf=1;
    console.log(mydata)
    axios.post('api/storeInfo/upBook',mydata).then((res)=>{
      console.log(res)
      if(res.data.code === 200){
        this.$message.success("添加图书成功")
        this.getBooks(0,10,1)
      }
    })
    this.dialogVisible=false
  },
  tryAddBook(){
    this.addBookInfo={}
    this.dialogVisible=true
  },
  async offShelf(bookId){
    let mydata={
      uid:sessionStorage.getItem('userId'),
      bookId:bookId
    }
    console.log(mydata)

    axios.post('api/storeInfo/downBook',mydata).then((res)=>{
      console.log(res)
      if(res.data.code === 200){
        this.$message.success("图书下架成功")
        this.getBooks(0,10,1)
      }
    })
  },
  async getBooks(page,size,onshelf){
    let mydata={
      storeId:this.storeInfo.storeId,
      page:page,
      size:size,
      isShelf:onshelf
    }
    axios.post('/api/storeInfo/getBooksOfStore',mydata).then((res)=>{
      console.log(res)
      this.books=res.data.data
    })
  },
  toDetail(param){
    this.$router.push({ path:'/home/bookdetail', query:{ bookId:param } })
    this.$emit('updateList');
  },
  async saveInfo(){
    let mydata={
      storeName: this.storeInfo.storeName,
      storePhoneNum: this.storeInfo.storePhoneNum,
      storePosition: this.storeInfo.storePosition,
      storeTelephone: this.storeInfo.storeTelephone,
    }
    axios.post('/api/store/updateStore',mydata).then((res)=>{
      console.log(res)
      this.$message.success("保存成功")
    })
    this.isModifying=false

  },
  async getInfo(){
    axios.post('/api/store/getStore').then((res)=>{
      if(res.data.code===0||res.data.code===200){
        this.hasStore=true
        this.storeInfo=res.data.data
        this.getBooks(0,10,1)
      }

    })
  },
  }
}
</script>

<style scoped>
  .container{
    width: 100%;
  }
  .center_card{
    width: 70%;
    margin: auto;
  }
  .center{
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .book_area{
    width: 20%;
    display: flex;
    justify-content: center;
    margin: 10px 0 10px 0;
  }
  .image{
    width: 150px;
    height: 170px;
  }
</style>
